<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<image style="width: 500rpx;height: 500rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
			</image>

		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<Verify @success="pwdLogin" :mode="'pop'" :captchaType="'blockPuzzle'"
				:imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
			<view class="action-btn">
			  <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
			  <!-- 注册提示 -->
			  <view style="margin-top: 40rpx;" class="text-center">
			    <text class="text-grey">还没有账号？</text>
			    <text class="text-blue" @click="showRegisterPopup" style="margin-left: 10rpx;">立即注册</text>
				<!-- 弹窗组件 -->
				<uni-popup ref="registerPopup" type="center" animation>
					<view class="popup-container animated-popup">
						<text class="popup-title">选择注册类型</text>
						<view class="popup-buttons">
							<button class="btn-shared" @click="goToRegister(0)">
								<uni-icons type="person" size="22" color="#fff" />
								<text class="btn-text">注册共享电工</text>
							</button>
							<button class="btn-certified" @click="goToRegister(1)">
								<uni-icons type="medal" size="22" color="#fff" />
								<text class="btn-text">注册持证电工</text>
							</button>
							<button class="btn-cancel" @click="hideRegisterPopup">
								<uni-icons type="close" size="22" color="#666" />
								<text class="btn-text">取消</text>
							</button>
						</view>
					</view>
				</uni-popup>
			  </view>
			</view>
		</view>

		<view class="xieyi flex flex-wrap items-start justify-center mt-4">
		  <view class="checkbox-box">
		    <uni-data-checkbox
		      multiple
		      v-model="checkedValues"
		      :localdata="checkboxOptions"
		      selected-color="#007aff"
		      @change="onAgreeChange"
		      class="custom-checkbox"
		    />
		  </view>
		
		  <view class="xieyi-text">
		    我已阅读并同意
		    <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
		    和
		    <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
		  </view>
		</view>
	</view>
</template>

<script>
	import Verify from "@/components/verifition/Verify"

	export default {
		name: 'Login',
		components: {
			Verify
		},
		data() {
			return {
				captchaEnabled: false, // 验证码开关 TODO 芋艿：需要抽到配置里
				globalConfig: getApp().globalData.config,
				checkboxOptions: [
				  { text: '', value: 'agree' } // 文本用后面组合方式写
				],
				checkedValues: [''],
				loginForm: {
					username: "",
					password: "",
					captchaVerification: ""
				}
			}
		},
		methods: {
		   onAgreeChange(e) {
			 // 可选：如果你需要做其他处理
			 console.log('是否勾选：', e.detail.value);
		   },
			// 隐私协议
			handlePrivacy() {
				let site = this.globalConfig.appInfo.agreements[0]
				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			// 用户协议
			handleUserAgrement() {
				let site = this.globalConfig.appInfo.agreements[1]
				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			showRegisterPopup() {
				this.$refs.registerPopup.open();
			},
			hideRegisterPopup() {
				this.$refs.registerPopup.close();
			},
			goToRegister(type) {
				this.hideRegisterPopup();
				this.$tab.navigateTo(`/pages/register?type=${type}`);
			},
			
			// 登录方法
			async handleLogin(params) {
				
				if (!this.checkedValues.includes('agree')) {
				   this.$modal.msgError("请先阅读并勾选协议")
				   return;
				}				
				if (this.loginForm.username === "") {
					this.$modal.msgError("请输入您的账号")
				} else if (this.loginForm.password === "") {
					this.$modal.msgError("请输入您的密码")
				} else {
					// 显示验证码
					if (this.captchaEnabled) {
						this.$refs.verify.show()
					} else { // 直接登录
						await this.pwdLogin({})
					}
				}
			},
			// 密码登录
			async pwdLogin(captchaParams) {
				this.$modal.loading("登录中，请耐心等待...")
				// 执行登录
				this.loginForm.captchaVerification = captchaParams.captchaVerification
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/index')
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 10%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 5%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
			}

			// .xieyi {
			// 	color: #333;
			// 	margin-top: 20px;
			// }			
		}
		
		.xieyi {
		  display: flex;
		  align-items: center; // 垂直居中
		  justify-content: center; // 水平居中
		  font-size: 12px;
		  color: #666;
		  line-height: 1.5;
		  padding: 10rpx 0;
		  width: 80%;
		  margin: 0 auto;
		  
		   .checkbox-box {
			  margin-right: -40rpx; // 进一步缩小间距
			  transform: scale(0.9); // 稍微缩小复选框
			}
		  
		  .xieyi-text {
		    display: flex;
		    align-items: center;
		    flex-wrap: wrap;
		  }
		  
		  .text-blue {
		    color: #007aff;
		    margin: 0 4rpx;
		  }
		}

		.easyinput {
			width: 100%;
		}
	}
	
	.login-code-img {
		height: 45px;
	}
	.popup-container {
		width: 550rpx;
		padding: 40rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
		transform: scale(0.9);
		transition: all 0.2s ease-in-out;
	}
	
	.animated-popup {
		animation: scaleIn 0.25s ease-out;
	}
	
	@keyframes scaleIn {
		from {
			transform: scale(0.7);
			opacity: 0;
		}
		to {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	.popup-title {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	
	.popup-buttons button {
		margin-top: 20rpx;
		font-size: 30rpx;
		padding: 20rpx 0;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14rpx;
	}
	
	.btn-shared {
		background-color: #007AFF;
		color: white;
	}
	
	.btn-certified {
		background-color: #4CD964;
		color: white;
	}
	
	.btn-cancel {
		background-color: #f5f5f5;
		color: #666;
	}
	
	.btn-text {
		font-size: 30rpx;
	}
</style>